<template>
  <el-main>
    <h1>恭喜您，提交成功！</h1>
    <el-row>
      <el-col :span="12">
        <el-button type="success" color="#3bcdaf" class="continue" @click="Continue">继续添加</el-button>
      </el-col>
      <el-col :span="12">
        <div class="exit">
          <el-button type="danger" loading style="width: 120px !important;height: 60px !important;border-radius: 5%;"
                     @click="exit">
            安全退出
          </el-button>
          <br/>
          <span style="font-size: 9px">无操作后{{ countdown }}秒自动退出</span>
        </div>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import {defineComponent, onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import store from "@/store"

export default defineComponent({
  name: "success",
  setup() {
    const router = useRouter();
    const countdown = ref();
    const dizhi = router.currentRoute.value.params.dizhi;

    /**
     * 这是计时器，设置5秒的计时器
     */
    let timer = null;
    const countTime = () => {

      timer = setInterval(() => {
        if (countdown.value === 0) {
          clearInterval(timer);
          exit();
        } else {
          countdown.value--;
        }
      }, 1000);

    };


    /**
     * continue函数，实现用户继续添加功能实现
     */
    const Continue = () => {
      // path.value = null;
      // router.go(-1);

      /*
      * 这里应该判断一下是从哪里过来的，是book还是paper
      * */
      if(RegExp(/Book/).test(dizhi))
        router.push("/book-input");
      if(RegExp(/Paper/).test(dizhi))
        router.push("/paper-input");
      clearInterval(timer);
      console.log(RegExp(/Book/).test(dizhi))
    }




    /**
     * 退出函数exit，实现用户退出
     */
    const exit = () => {
      router.push({
        path: "/",
      });
      // store.commit("setUser",{name:"张三",class:"高一（三）班"}); // TODO:这里应该是直接删除
      window.sessionStorage.removeItem("USER");
    }


    onMounted(() => {
      countdown.value = 5;
      countTime();
      console.log(dizhi);

    });

    return {
      countdown,
      exit,
      Continue,

    }
  }
});
</script>

<style scoped>
.el-main {
  background: #FFFFFF !important;
  /*height: 800px!important;*/
  /*width: 1024px!important;*/
}

.el-main h1 {
  color: #000;
  text-align: center;
  margin-top: 60px;
}

.continue {
  width: 120px !important;
  height: 60px !important;
  /*margin-bottom: 500px!important;*/
  margin-top: 106px !important;
  margin-left: 270px !important;
  border-radius: 5%;
}

.exit {
  margin-top: 106px !important;
  margin-left: 30px !important;
}
</style>